<template>
    <div style="position: relative;">
        <img src="../assets/background-992868_1280.webp" width="99.5%" />
        <div style="position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);color: #fff;">
            <el-form ref="ruleFormRef" style="max-width: 600px; color:#fff" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item style="color:#fff" label="密码" prop="accountPass">
                    <el-input v-model="ruleForm.accountPass" type="password" />
                </el-form-item>
                <el-form-item label="验证码" prop="vcode">
                    <el-input v-model="ruleForm.vcode" style="width: 120px; margin-right: 16px;" />
                    <el-tag @click="setVCode" type="danger">{{ ycodeEx }}</el-tag>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        登录
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>


                <!-- <el-form-item label="summary">
                    <el-input v-model="ruleForm.summary" style="width: 120px;" />
                    <el-button @click="getTianqi()">获取天气</el-button>
                </el-form-item> -->
            </el-form>
        </div>
    </div>
</template>
<style scoped>
.el-form-item__label{
    color: #fff;
}
</style>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router'

let router = useRouter()

interface RuleForm {
    name: string
    accountPass: string,
    vcode: string,
    summary: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: 'Hello',
    accountPass: '',
    vcode: '',
    summary: ''
})

let ycode = ref(0);//验证码的值
let ycodeEx = ref('');//表达式  1x2=?
const setVCode = () => {
    let num1 = Math.floor(Math.random() * 10);//10以内的正整数 
    let num2 = Math.floor(Math.random() * 10);//10以内的正整数 
    let op = Math.floor(Math.random() * 4);//0- 3 的正整数
    if (op === 0) {
        ycode.value = num1 + num2;
        ycodeEx.value = '' + num1 + '+' + num2 + '=?'
    } else if (op === 1) {
        if (num1 < num2) {
            let tem = num2;
            num2 = num1;
            num1 = tem;
        }
        ycode.value = num1 - num2;
        ycodeEx.value = '' + num1 + '-' + num2 + '=?'
    } else if (op === 2) {
        ycode.value = num1 * num2;
        ycodeEx.value = '' + num1 + 'x' + num2 + '=?'
    } else if (op === 3) {
        if (num2 == 0) {
            num2 = 1;
        }
        num1 = num1 * num2;
        ycode.value = num1 / num2;
        ycodeEx.value = '' + num1 + '÷' + num2 + '=?'
    }
}

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '用户名非空', trigger: 'blur' },
        { min: 3, max: 15, message: '长度必须是3-15', trigger: 'blur' },
    ],
    accountPass: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
        },
    ]
})

//登录
const submitForm = async (formEl: FormInstance | undefined) => {
    if (ycode.value.toString() != ruleForm.vcode) {
        ElMessage.error("请输入正确的验证码");
        return;
    }

    if (!formEl) return

    axios.get('https://localhost:7016/api/Account/Login', { params: { accountName: ruleForm.name, accountPass: ruleForm.accountPass } }).then((res => {

        console.log(res);
        if (res.data.code == 200) {
            //登录成功,保存token
            sessionStorage.setItem("token", res.data.msg)
            ElMessage.success("登录成功!");
            router.push('main')
        } else {
            ElMessage.success(res.data.msg);
        }
    }))
}

const getTianqi = () => {
    let token = sessionStorage.getItem("token");

    axios.defaults.headers.common["Authorization"] = token;
    axios.get('https://localhost:7016/WeatherForecast').then((res) => {
        ruleForm.summary = res.data[0].summary
        ElMessage.success("今天天气" + ruleForm.summary);
    }).catch(err => {
        console.log(err)
        if (err.response.status == 401) {
            ElMessage.error("您无权操作");
        }
        console.log(err)
    })

}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
onMounted(() => {
    setVCode();
});

</script>